<template>
    <div class="Personal_Center">
        <h1>个人中心</h1>
        <div class="image-info-container">
            <img v-bind:src="image" alt="" v-if="image!=''">
            <img src="../assets/生成默认头像.png" alt="" v-if="image==''">
            <div class="user-info">
                <span>用户名：{{ username }}</span>
                <span>邮箱：{{ email }}</span>
                <span>密码：{{ password }}</span>
                <span>
                    <span style="color: dodgerblue;cursor: pointer;" @click="isshow = 1">修改账号</span>&emsp;<span
                        style="color: dodgerblue;cursor: pointer;" @click="del()">注销</span>
                </span>
            </div>
        </div>
        <div>
            <span v-text="nicheng !== '' ? '昵称：' + nicheng : '昵称：' + '未设置'"></span><span
                v-text="xingbie !== '' ? '性别：' + xingbie : '性别：' + '未设置'"></span>
            <span v-text="shengri !== '' ? '生日：' + shengri : '生日：' + '未设置'"></span><span
                v-text="shoujihao !== '' ? '手机号：' + shoujihao : '手机号：' + '未设置'"></span>
            <span v-text="leixing !== '' ? '讲师类型：' + leixing : '讲师类型：' + '未设置'"></span>
            <button @click="isshow = 2" style="width: 100px;
            height: 40px;background-color: rgb(69, 144, 255);color: white;border: none;border-radius: 5px;font-size: 14px;">编辑信息</button>
        </div>

        <div class="login-container" v-show="isshow == 1">
            <h1 class="login-title">修改账号</h1>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="请输入用户名" v-model="username_re">
                <p v-if="!isValidUsername" class="error-message">用户名应为2到6个中文</p>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请输入密码" v-model="password_re">
                <p v-if="!isValidPassword" class="error-message">密码应为8到12个数字或字母</p>
            </div>
            <div class="form-group">
                <label for="mailbox">邮箱</label>
                <input type="text" id="mailbox" placeholder="请输入邮箱" v-model="email_re">
                <p v-if="!isValidEmail" class="error-message">请输入正确的邮箱格式</p>
            </div>
            <button class="login-button" @click="enroll()">修改</button>
            <p @click="isshow = 0">取消修改</p>
        </div>


        <div v-show="isshow == 2">
            <h1>编辑信息</h1>
            <div>
                <span>&emsp;用户名：</span><input type="text" v-model="name">
            </div>
            <div>
                <span>&emsp;昵&emsp;称：</span><input type="text" v-model="nick">
            </div>
            <div>
                <span>&emsp;性&emsp;别：</span><input type="radio" name="sex" value="0" v-model="sex">
                <p>男</p><input type="radio" name="sex" value="1" v-model="sex">
                <p>女</p>
            </div>
            <div>
                <span>&emsp;生&emsp;日：</span><input type="date" v-model="birthdata">
            </div>
            <div>
                <span>&emsp;手机号：</span><input type="text" v-model="iphone">
            </div>
            <div>
                <span>讲师类型：</span><input type="radio" name="teachertype" value="1" v-model="teachertype">
                <p>讲师</p><input type="radio" name="teachertype" value="2" v-model="teachertype">
                <p>班主任</p>
            </div>

            <div>
                <span>图片链接：</span><input type="text" v-model="images">
            </div>
            <button @click="isshow = 0">取消</button><button @click="addTeacher">编辑</button>
        </div>


    </div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            email: '',
            password: '',
            isValidUsername: true,
            isValidPassword: true,
            isValidEmail: true,
            username_re: '',
            password_re: '',
            email_re: '',
            isshow: 0,
            name: '',
            nick: '',
            sex: 0,
            birthdata: '',
            iphone: '',
            teachertype: 1,
            image: '',
            nicheng: '',
            xingbie: '',
            shengri: '',
            shoujihao: '',
            leixing: '',
            imgg:'../assets/生成默认头像.png',
            images:''

        }
    },
    methods: {
        // 注销账号
        del() {
            localStorage.clear()
            this.$router.push('/Enroll')
        },
        // 修改账号
        enroll() {
            this.isValidUsername = /^[\u4e00-\u9fa5]{2,6}$/.test(this.username);
            this.isValidPassword = /^[a-zA-Z0-9]{8,12}$/.test(this.password);
            this.isValidEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.email);

            if (this.isValidUsername && this.isValidPassword && this.isValidEmail) {
                localStorage.setItem('Account', JSON.stringify({
                    username: this.username_re,
                    password: this.password_re,
                    email: this.email_re
                }));
                this.username = JSON.parse(localStorage.getItem('Account')).username
                this.email = JSON.parse(localStorage.getItem('Account')).email
                this.password = JSON.parse(localStorage.getItem('Account')).password
                this.isshow = 0
            }
        },
        // 编辑信息
        addTeacher() {
            localStorage.setItem('Teacher', JSON.stringify({
                name: this.name,
                nick: this.nick,
                sex: this.sex,
                birthdata: this.birthdata,
                iphone: this.iphone,
                teachertype: this.teachertype,
                image: this.images
            }));
            this.isshow = 0
            this.nicheng = this.name
            this.xingbie = this.sex == 0 ? '男' : '女'
            this.shengri = this.birthdata
            this.shoujihao = this.iphone
            this.leixing = this.teachertype == 1 ? '讲师' : '班主任'
            this.image = this.images
            // 刷新页面
            location.reload();
        }
    },
    components: {

    },
    created() {
        // 获取用户信息
        this.username = JSON.parse(localStorage.getItem('Account')).username
        this.email = JSON.parse(localStorage.getItem('Account')).email
        this.password = JSON.parse(localStorage.getItem('Account')).password
        // 获取个人中心信息
        if (JSON.parse(localStorage.getItem('Teacher')) != null) {
            this.nicheng = JSON.parse(localStorage.getItem('Teacher')).nick
            this.xingbie = JSON.parse(localStorage.getItem('Teacher')).sex == 0 ? '男' : '女'
            this.shengri = JSON.parse(localStorage.getItem('Teacher')).birthdata
            this.shoujihao = JSON.parse(localStorage.getItem('Teacher')).iphone
            this.leixing = JSON.parse(localStorage.getItem('Teacher')).teachertype == 1 ? '讲师' : '班主任'
            this.image = JSON.parse(localStorage.getItem('Teacher')).image
        }
    }
}
</script>

<style less>
.Personal_Center {
    width: calc(85vw - 40px);
    height: calc(85vh - 40px);
    background-color: white;
    position: absolute;
    top: 12vh;
    left: 12vw;
    overflow: auto;
    padding: 20px;

    >h1 {
        font-size: 28px;
    }

    .image-info-container {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        height: 150px;

        >img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-right: 20px;
        }

        .user-info {
            display: flex;
            flex-direction: column;

            span {
                display: inline-block;
                font-size: 16px;
                margin-bottom: 8px;
                margin-top: 5px;
            }
        }
    }

    >div:nth-of-type(2) {
        >span {
            display: inline-block;
            width: 50%;
            font-size: 18px;
            height: 50px;
            line-height: 50px;
        }
    }

    .login-container {
        background-color: rgb(255, 255, 255);
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 360px;
        position: absolute;
        top: 20%;
        left: 30%;


        >h1 {
            font-size: 22px;
        }

        .login-title {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }

        .form-group {
            margin-bottom: 20px;

            label {
                display: block;
                margin-bottom: 8px;
                color: #666;
            }

            input {
                width: 100%;
                padding: 12px;
                border: 1px solid #ddd;
                border-radius: 4px;
                box-sizing: border-box;
                transition: border-color 0.3s ease;

                &:focus {
                    outline: none;
                    border-color: #007bff;
                }
            }

            .error-message {
                color: red;
                font-size: 12px;
                margin-top: 5px;
            }
        }

        .login-button {
            width: 100%;
            padding: 12px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 18px;

            &:hover {
                background-color: #0056b3;
            }
        }

        >p {
            float: right;
            font-size: 16px;
            color: rgb(57, 124, 255);
            cursor: pointer;
            font-style: italic;
            text-decoration: underline;
        }
    }

    >div:nth-of-type(4) {
        width: 300px;
        padding: 20px;
        background-color: white;
        position: fixed;
        top: 30vh;
        left: 40vw;
        z-index: 999;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);

        >h1 {
            font-size: 20px;
            margin-bottom: 20px;
        }

        >div {
            margin-bottom: 20px;

            >input[type="text"] {
                width: 200px;
                height: 15px;
                padding: 5px;
                outline: none;
                border: 1px solid darkgray;
            }

            >p {
                margin-right: 20px;
                display: inline-block;
                position: relative;
                bottom: 2px;
                margin-left: 3px;
            }

            >input[type='date'] {
                width: 200px;
                height: 15px;
                padding: 5px;
                outline: none;
                border: 1px solid darkgray;
            }
        }

        >button {
            width: 100px;
            height: 30px;
            background-color: rgb(235, 218, 175);
            border: none;
            border-radius: 5px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            margin-left: 35px;
            margin-bottom: 20px;
        }

        >button:nth-of-type(1) {
            background-color: rgb(235, 235, 235);

        }
    }
}
</style>